<script setup>
import { ref, onMounted, watch } from 'vue'
import { fetchAdList, deleteAd, updateAdStatus, addAdvertisement } from '@/api/substance/advertisement/advertisement.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { fetchPositionList } from '@/api/substance/advertisement/advertisement.js'
import { fetchTargetAudienceList } from '@/api/substance/advertisement/advertisement.js'
import request from '@/utils/request'

const queryForm = ref({ name: '', status: '' })
const statusOptions = [
  { label: '全部', value: '' },
  { label: '上线中', value: 1 },
  { label: '已下线', value: 0 }
]
const adList = ref([])
const loading = ref(false)
const page = ref({ pageNum: 1, pageSize: 10, total: 0 })
const multipleSelection = ref([])
const addDialogVisible = ref(false)

// 添加广告表单数据
const addForm = ref({
  advertisementName: '',
  positionIds: [],
  displayType: 0, // 0-单图固定 1-多图轮播
  weight: '',
  materials: [],
  startDate: '', // 对应数据库 start_date
  endDate: '',   // 对应数据库 end_date
  timeRangeType: 1, // 对应数据库 time_range_type: 1-全时段 2-指定时段
  timeRanges: '',   // 对应数据库 time_ranges
  targetType: 1,    // 对应数据库 target_type: 1-全部人群 2-指定人群
  targetIds: []
})

const displayType = ref('单图固定')

// 单图固定相关
const adImage = ref('')
const adImageUploading = ref(false)
const adImagePercent = ref(0)
const adImageUrl = ref('')
const adRedirectUrl = ref('')

// 多图轮播广告位
const adCarouselList = ref([
  { image: '', uploading: false, percent: 0, link: '', filePath: '' }
])
const carouselInterval = ref(3) // 轮播间隔时间

const deliveryPeriod = ref('全时段') // 投放时段
const deliveryTime = ref([])        // 指定时段，时间范围
const pushGroup = ref('全部人群')   // 推送人群
const groupDialogVisible = ref(false)
const groupList = ref([
  { name: '沉默用户', desc: '近60天消费3次及以上的客户', cover: 12989, active: 3583 },
  { name: '有消费意向', desc: '近90天有搜索且加购但未支付的客户', cover: 2356, active: 245 },
  { name: '需重点培养', desc: '首次消费后，60天内再次购买的客户', cover: 4563, active: 4466 },
  { name: '需营销刺激用户', desc: '最近30天完成首次消费', cover: 3583, active: 3583 },
  { name: '未消费潜在用户', desc: '首次浏览店铺，且之后7-15天无支付行为的用户', cover: 245, active: 245 }
])
const groupPage = ref({ pageNum: 1, pageSize: 10, total: groupList.value.length })
const groupSelection = ref([]) // 已选人群

function statusText(status) {
  if (status === 1) return '上线中'
  if (status === 0) return '已下线'
  return '-'
}

function handleImageChange(file, fileList) {
  adImageUploading.value = true
  // 模拟上传进度
  adImagePercent.value = 33
  setTimeout(() => {
    adImagePercent.value = 100
    adImage.value = URL.createObjectURL(file.raw)
    adImageUrl.value = `/uploads/${file.raw.name}` // 模拟文件路径
    adImageUploading.value = false
  }, 1000)
}

function handleCarouselImageChange(file, fileList, idx) {
  adCarouselList.value[idx].uploading = true
  adCarouselList.value[idx].percent = 33
  setTimeout(() => {
    adCarouselList.value[idx].percent = 100
    adCarouselList.value[idx].image = URL.createObjectURL(file.raw)
    adCarouselList.value[idx].filePath = `/uploads/${file.raw.name}` // 设置文件路径
    adCarouselList.value[idx].uploading = false
  }, 1000)
}
function handleAddCarousel() {
  if (adCarouselList.value.length < 5) {
    adCarouselList.value.push({ image: '', uploading: false, percent: 0, link: '', filePath: '' })
  }
}

function handleRemoveCarousel(idx) {
  if (adCarouselList.value.length > 1) {
    adCarouselList.value.splice(idx, 1)
  }
}

function fetchList() {
  loading.value = true
  fetchAdList({
    pageNum: page.value.pageNum,
    pageSize: page.value.pageSize,
    name: queryForm.value.name,
    status: queryForm.value.status
  }).then(res => {
    const data = res.data || {}
    adList.value = data.list || []
    page.value.total = data.total || 0
  }).finally(() => {
    loading.value = false
  })
}

function handleQuery() {
  page.value.pageNum = 1
  fetchList()
}
function handleReset() {
  queryForm.value = { name: '', status: '' }
  page.value.pageNum = 1
  fetchList()
}
function handlePageChange(num) {
  page.value.pageNum = num
  fetchList()
}
function handleSizeChange(size) {
  page.value.pageSize = size
  page.value.pageNum = 1
  fetchList()
}

function handleSelectionChange(val) {
  multipleSelection.value = val
}

async function handleDelete(row) {
  try {
    await ElMessageBox.confirm('确定要删除该广告吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await deleteAd([row.id])
    ElMessage.success('删除成功')
    fetchList()
  } catch (e) {}
}

async function handleBatchDelete() {
  if (!multipleSelection.value.length) return
  try {
    await ElMessageBox.confirm('确定要删除选中的广告吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await deleteAd(multipleSelection.value.map(item => item.id))
    ElMessage.success('批量删除成功')
    fetchList()
  } catch (e) {}
}

async function handleOnline(row) {
  await updateAdStatus(row.id)
  ElMessage.success('已上线')
  fetchList()
}
async function handleOffline(row) {
  await updateAdStatus(row.id)
  ElMessage.success('已下线')
  fetchList()
}

function handleData(row) {
  ElMessage.info('数据功能开发中...')
}

function handleEdit(row) {
  ElMessage.info('编辑功能开发中...')
}

function handleAdd() {
  addDialogVisible.value = true
  resetAddForm()
}

function resetAddForm() {
  addForm.value = {
    advertisementName: '',
    positionIds: [],
    displayType: 0,
    weight: '',
    materials: [],
    startDate: '',
    endDate: '',
    timeRangeType: 1,
    timeRanges: '',
    targetType: 1,
    targetIds: []
  }
  displayType.value = '单图固定'
  adImage.value = ''
  adImageUrl.value = ''
  adRedirectUrl.value = ''
  adCarouselList.value = [{ image: '', uploading: false, percent: 0, link: '', filePath: '' }]
  carouselInterval.value = 3
  deliveryPeriod.value = '全时段'
  deliveryTime.value = []
  pushGroup.value = '全部人群'
  displayDate.value = []
  targetAudienceSelection.value = []
  // 重置表单字段
  addForm.value.timeRangeType = 1
  addForm.value.timeRanges = ''
  addForm.value.targetType = 1
  addForm.value.targetIds = []
}

async function handleAddSubmit() {
  // 表单验证
  if (!addForm.value.advertisementName.trim()) {
    ElMessage.error('请输入广告名称')
    return
  }
  if (!addForm.value.positionIds.length) {
    ElMessage.error('请选择广告位置')
    return
  }
  const weight = parseInt(addForm.value.weight)
  if (!addForm.value.weight || isNaN(weight) || weight < 0 || weight > 100) {
    ElMessage.error('请输入0-100之间的权重值')
    return
  }
  if (!addForm.value.startDate || !addForm.value.endDate) {
    ElMessage.error('请选择显示日期')
    return
  }
  if (addForm.value.timeRangeType === 2 && !addForm.value.timeRanges) {
    ElMessage.error('请选择投放时段')
    return
  }
  if (addForm.value.targetType === 2 && (!addForm.value.targetIds || addForm.value.targetIds.length === 0)) {
    ElMessage.error('请选择目标人群')
    return
  }
  
  // 构建提交数据
  const submitData = {
    advertisementName: addForm.value.advertisementName,
    positionIds: addForm.value.positionIds,
    displayType: displayType.value === '单图固定' ? 0 : 1,
    weight: weight,
    materials: [],
    startDate: addForm.value.startDate,
    endDate: addForm.value.endDate,
    timeRangeType: addForm.value.timeRangeType,
    timeRanges: addForm.value.timeRanges,
    targetType: addForm.value.targetType,
    targetIds: addForm.value.targetIds
  }

  // 构建素材数据
  if (displayType.value === '单图固定') {
    if (!adImageUrl.value) {
      ElMessage.error('请上传广告图片')
      return
    }
    if (!adRedirectUrl.value) {
      ElMessage.error('请输入跳转链接')
      return
    }
    submitData.materials.push({
      filePath: adImageUrl.value,
      fileName: adImageUrl.value.split('/').pop(),
      fileType: '1', // png
      fileSize: 1024, // 模拟文件大小
      redirectUrl: adRedirectUrl.value,
      displaySeconds: 0,
      sortOrder: 1
    })
  } else {
    // 多图轮播
    for (let i = 0; i < adCarouselList.value.length; i++) {
      const item = adCarouselList.value[i]
      if (!item.image) {
        ElMessage.error(`请上传第${i + 1}号位广告图片`)
        return
      }
      if (!item.link) {
        ElMessage.error(`请输入第${i + 1}号位跳转链接`)
        return
      }
      submitData.materials.push({
        filePath: item.filePath || `/uploads/carousel_${i + 1}.png`,
        fileName: `carousel_${i + 1}.png`,
        fileType: '1',
        fileSize: 1024,
        redirectUrl: item.link,
        displaySeconds: carouselInterval.value,
        sortOrder: i + 1
      })
    }
  }

  try {
    console.log('提交的广告数据:', submitData)
    await addAdvertisement(submitData)
    ElMessage.success('添加广告成功')
    addDialogVisible.value = false
    fetchList() // 刷新列表
  } catch (error) {
    ElMessage.error('添加广告失败')
    console.error('添加广告错误:', error)
  }
}

function handleAddCancel() {
  addDialogVisible.value = false
}

const displayDate = ref([]) // 必须是ref([])，不能是ref('')
watch(displayDate, (val) => {
  console.log('选择的日期：', val)
})

function handleDateChange(val) {
  if (val && val.length === 2) {
    addForm.value.startDate = val[0]
    addForm.value.endDate = val[1]
  } else {
    addForm.value.startDate = ''
    addForm.value.endDate = ''
  }
}

function handleDeliveryPeriodChange(val) {
  if (val === '全时段') {
    addForm.value.timeRangeType = 1
    addForm.value.timeRanges = ''
  } else {
    addForm.value.timeRangeType = 2
  }
}

function handleDeliveryTimeChange(val) {
  if (val && val.length === 2) {
    addForm.value.timeRanges = `${val[0]}-${val[1]}`
  } else {
    addForm.value.timeRanges = ''
  }
}

function handlePushGroupChange(val) {
  if (val === '全部人群') {
    addForm.value.targetType = 1
    addForm.value.targetIds = []
  } else {
    addForm.value.targetType = 2
  }
}

const positionOptions = ref([])
const adPositions = ref([]) // 选中的id数组

onMounted(() => {
  fetchList()
  fetchPositionList().then(res => {
    // 假设res.data为数组 [{id: 1, positionName: '首页弹窗'}, ...]
    positionOptions.value = res.data || []
  })
})

function handleGroupConfirm() {
  // 这里可以把 groupSelection.value 保存到主表单
  groupDialogVisible.value = false
}



const targetAudienceDialogVisible = ref(false)
const targetAudienceList = ref([])
const targetAudienceSelection = ref([])
const targetAudiencePage = ref({ pageNum: 1, pageSize: 10, total: 0 })

function openTargetAudienceDialog() {
  targetAudienceDialogVisible.value = true
  loadTargetAudienceList()
}

function loadTargetAudienceList() {
  fetchTargetAudienceList({
    pageNum: targetAudiencePage.value.pageNum,
    pageSize: targetAudiencePage.value.pageSize
  }).then(res => {
    targetAudienceList.value = res.data || []
    targetAudiencePage.value.total = res.total || targetAudienceList.value.length
  })
}

function handleTargetAudienceConfirm() {
  // targetAudienceSelection.value 为已选目标客户数组
  addForm.value.targetIds = targetAudienceSelection.value.map(item => item.id)
  targetAudienceDialogVisible.value = false
}

// 监听分页变化自动加载
watch(() => [targetAudiencePage.value.pageNum, targetAudiencePage.value.pageSize], loadTargetAudienceList)

</script>

<template>
  <div class="ad-page">
    <div class="ad-toolbar">
      <el-button type="primary" @click="handleAdd">新建广告</el-button>
      <el-button type="danger" :disabled="!multipleSelection.length" @click="handleBatchDelete" size="small" style="margin-left: 12px;">批量删除</el-button>
    </div>
    <div class="ad-query-card">
      <el-form :inline="true" :model="queryForm" class="ad-query-form">
        <el-form-item label="广告名称">
          <el-input v-model="queryForm.name" placeholder="请输入广告名称" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.status" placeholder="全部" clearable style="width: 180px;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="adList" border v-loading="loading" class="ad-table" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="广告名称" prop="advertisementName" min-width="160" />
      <el-table-column label="位置" prop="positionName" min-width="180" />
      <el-table-column label="权重" prop="weight" width="80" align="center" />
      <el-table-column label="状态" width="100" align="center">
        <template #default="scope">{{ statusText(scope.row.status) }}</template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="180">
        <template #default="scope">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</template>
      </el-table-column>
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <a class="ad-action-link" data-type="data" @click="handleData(scope.row)">数据</a>
          <a
            v-if="scope.row.status === 1"
            class="ad-action-link"
            data-type="offline"
            @click="handleOffline(scope.row)"
          >下线</a>
          <a
            v-else
            class="ad-action-link"
            data-type="online"
            @click="handleOnline(scope.row)"
          >上线</a>
          <a class="ad-action-link" data-type="edit" @click="handleEdit(scope.row)">编辑</a>
          <a class="ad-action-link" data-type="delete" @click="handleDelete(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="ad-pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="page.total"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :page-sizes="[10, 20, 50, 100]"
      />
    </div>
    <el-dialog v-model="addDialogVisible" title="新建广告" width="900px" :close-on-click-modal="false" @close="handleAddCancel">
      <div class="ad-add-section">
        <div class="ad-add-block">
          <div class="ad-add-title">基础信息</div>
          <el-form label-width="100px">
            <el-form-item label="广告名称" required>
              <el-input v-model="addForm.advertisementName" placeholder="请输入广告名称" maxlength="20" show-word-limit style="width: 300px;" />
            </el-form-item>
            <el-form-item label="广告位置" required>
              <el-select
                v-model="addForm.positionIds"
                multiple
                filterable
                placeholder="请选择位置"
                style="width: 100%;"
                class="ad-position-select"
              >
                <el-option
                  v-for="item in positionOptions"
                  :key="item.id"
                  :label="item.positionName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <!-- 展示形式选择 -->
            <el-form-item label="展示形式" required>
              <el-radio-group v-model="displayType">
                <el-radio label="单图固定">单图固定</el-radio>
                <el-radio label="多图轮播">多图轮播</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 单图固定区域 -->
            <template v-if="displayType === '单图固定'">
              <el-form-item label="广告图片" required>
                <el-upload
                  class="ad-upload"
                  action="#"
                  :show-file-list="false"
                  :before-upload="() => false"
                  :on-change="handleImageChange"
                >
                  <template #default>
                    <div v-if="adImageUploading" class="ad-upload-progress">
                      <span>上传中 {{ adImagePercent }}%</span>
                    </div>
                    <img v-else-if="adImage" :src="adImage" class="ad-upload-img" />
                    <div v-else class="ad-upload-placeholder">
                      <span>+</span>
                      <div>点击上传</div>
                    </div>
                  </template>
                </el-upload>
                <span class="ad-upload-tip">仅支持png、jpg、jpeg格式，图片大小不超过3mb</span>
              </el-form-item>
              <el-form-item label="跳转链接" required>
                <el-input v-model="adRedirectUrl" placeholder="请输入跳转链接" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="权重" required>
                <el-input v-model="addForm.weight" placeholder="请输入权重" style="width: 120px;" />
                <span class="ad-upload-tip">输入0~100之间的整数，数值越大，权重越高</span>
              </el-form-item>
            </template>

            <!-- 多图轮播区域 -->
            <template v-if="displayType === '多图轮播'">
              <el-form-item label="间隔时间" required>
                <el-radio-group v-model="carouselInterval">
                  <el-radio :label="3">3S</el-radio>
                  <el-radio :label="5">5S</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-for="(item, idx) in adCarouselList" :key="idx" class="ad-carousel-item">
                <el-button
                  v-if="adCarouselList.length > 1"
                  type="danger"
                  size="small"
                  @click="handleRemoveCarousel(idx)"
                  style="position: absolute; top: 18px; right: 24px; background: #fff0f0; color: #ff4d4f; border: none; font-weight: bold;"
                  plain
                >删除</el-button>
                <div style="display: flex; align-items: flex-start; gap: 24px;">
                  <el-upload
                    class="ad-upload"
                    action="#"
                    :show-file-list="false"
                    :before-upload="() => false"
                    :on-change="(file, fileList) => handleCarouselImageChange(file, fileList, idx)"
                  >
                    <template #default>
                      <div v-if="item.uploading" class="ad-upload-progress">
                        <span>上传中 {{ item.percent }}%</span>
                      </div>
                      <img v-else-if="item.image" :src="item.image" class="ad-upload-img" />
                      <div v-else class="ad-upload-placeholder">
                        <span>+</span>
                        <div>点击上传</div>
                      </div>
                    </template>
                  </el-upload>
                  <div style="flex:1;">
                    <el-form-item label="跳转链接" required>
                      <el-input v-model="item.link" placeholder="请输入跳转链接" style="width: 100%;" />
                    </el-form-item>
                    <div class="ad-upload-tip">
                      支持png、jpg、jpeg格式，图片大小不超过3mb。支持的链接类型，需与产品经理确认。
                    </div>
                  </div>
                </div>
              </div>
              <el-button
                type="primary"
                plain
                style="margin-top: 12px;"
                :disabled="adCarouselList.length >= 5"
                @click="handleAddCarousel"
              >添加广告位（最多添加5个）</el-button>
              <el-form-item label="权重排序" required>
                <el-input v-model="addForm.weight" placeholder="请输入权重" style="width: 120px;" />
                <span class="ad-upload-tip">输入0~100之间的数字，数值越大，权重越高。</span>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="ad-add-block">
          <div class="ad-add-title">显示规则</div>
          <el-form label-width="100px">
            <el-form-item label="显示日期" required>
              <el-date-picker
                v-model="displayDate"
                type="daterange"
                range-separator=" 至 "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
                clearable
                @change="handleDateChange"
              />
            </el-form-item>
            <el-form-item label="投放时段" required>
              <el-radio-group v-model="deliveryPeriod" @change="handleDeliveryPeriodChange">
                <el-radio label="全时段">全时段</el-radio>
                <el-radio label="指定时段">指定时段</el-radio>
              </el-radio-group>
              <el-time-picker
                v-if="deliveryPeriod === '指定时段'"
                v-model="deliveryTime"
                is-range
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                style="margin-left: 16px; width: 220px;"
                :clearable="false"
                @change="handleDeliveryTimeChange"
              />
            </el-form-item>
            <el-form-item label="推送人群" required>
              <el-radio-group v-model="pushGroup" @change="handlePushGroupChange">
                <el-radio label="全部人群">全部人群</el-radio>
                <el-radio label="指定人群">指定人群</el-radio>
              </el-radio-group>
              <el-button
                v-if="pushGroup === '指定人群'"
                type="primary"
                link
                style="margin-left: 8px;"
                @click="openTargetAudienceDialog"
              >选择</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="handleAddSubmit">提交</el-button>
        <el-button @click="handleAddCancel">取消</el-button>
      </template>
    </el-dialog>

    <!-- 选择人群弹窗 -->
    <el-dialog v-model="groupDialogVisible" title="选择人群" width="800px">
      <div style="margin-bottom: 12px;">
        <el-button type="primary" size="small">新建人群</el-button>
        <el-input placeholder="请输入人群名称" style="width: 220px; margin-left: 12px;" />
        <el-button type="primary" link style="float:right;">刷新</el-button>
      </div>
      <el-table
        :data="groupList"
        border
        @selection-change="groupSelection = $event"
        style="margin-bottom: 12px;"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="name" label="人群名称" />
        <el-table-column prop="desc" label="人群描述" />
        <el-table-column prop="cover" label="覆盖人数" />
        <el-table-column prop="active" label="活跃人数" />
      </el-table>
      <el-pagination
        v-model:current-page="groupPage.pageNum"
        v-model:page-size="groupPage.pageSize"
        :total="groupPage.total"
        layout="total, prev, pager, next, sizes"
        style="text-align:right;"
      />
      <template #footer>
        <el-button @click="groupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleGroupConfirm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 目标客户弹窗 -->
    <el-dialog v-model="targetAudienceDialogVisible" title="选择目标客户" width="900px">
      <el-table
        :data="targetAudienceList"
        border
        @selection-change="targetAudienceSelection = $event"
        style="margin-bottom: 12px;"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="name" label="人群名称" />
        <el-table-column prop="description" label="人群描述" />
        <el-table-column prop="coverageCount" label="覆盖人数" />
        <el-table-column prop="activeCount" label="活跃人数" />
      </el-table>
      <el-pagination
        v-model:current-page="targetAudiencePage.pageNum"
        v-model:page-size="targetAudiencePage.pageSize"
        :total="targetAudiencePage.total"
        layout="total, prev, pager, next, sizes"
        style="text-align:right;"
      />
      <template #footer>
        <el-button @click="targetAudienceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleTargetAudienceConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.ad-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}
.ad-toolbar {
  margin-bottom: 16px;
}
.ad-query-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 18px 24px 6px 24px;
  margin-bottom: 18px;
}
.ad-query-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}
.ad-query-form .el-form-item {
  margin-bottom: 0;
}
.ad-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 0;
}
.ad-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 18px 24px 18px 0;
}
.ad-table .ad-action-link {
  font-weight: 500;
  font-size: 15px;
  margin: 0 6px;
  border-radius: 4px;
  padding: 2px 10px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.ad-table .ad-action-link[data-type="offline"] {
  color: #faad14;
}
.ad-table .ad-action-link[data-type="online"] {
  color: #52c41a;
}
.ad-table .ad-action-link[data-type="edit"] {
  color: #1890ff;
}
.ad-table .ad-action-link[data-type="delete"] {
  color: #ff4d4f;
}
.ad-table .ad-action-link[data-type="data"] {
  color: #1890ff;
}

.ad-table .ad-action-link:hover {
  background: #f5f5f5;
  text-decoration: underline;
}
.ad-add-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ad-add-block {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 24px 12px 24px;
  margin-bottom: 12px;
}
.ad-add-title {
  font-size: 17px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.ad-upload-tip {
  color: #999;
  font-size: 13px;
  margin-left: 12px;
}
.ad-upload {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: inline-block;
  position: relative;
  background: #fafafa;
  text-align: center;
  vertical-align: top;
}
.ad-upload-placeholder {
  width: 100%;
  height: 100%;
  color: #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.ad-upload-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.ad-upload-progress {
  width: 100%;
  height: 100%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409EFF;
  font-size: 16px;
  border-radius: 6px;
}
.ad-carousel-item {
  background: #fafbfc;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 20px 24px 16px 24px;
  margin-bottom: 20px;
  position: relative;
}

.ad-upload {
  width: 120px;
  height: 120px;
  border: 1.5px dashed #d9d9d9;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  transition: border-color 0.2s;
  &:hover {
    border-color: #409EFF;
  }
}

.ad-upload-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.ad-upload-tip {
  display: inline-block;
  background: #f4f6fa;
  color: #888;
  font-size: 13px;
  border-radius: 6px;
  padding: 2px 10px;
  margin-top: 4px;
  margin-left: 0;
}

.ad-carousel-item .el-button[type='danger'] {
  position: absolute;
  top: 18px;
  right: 24px;
  background: #fff0f0;
  color: #ff4d4f;
  border: none;
  font-weight: bold;
  transition: background 0.2s;
  &:hover {
    background: #ffeaea;
    color: #d9363e;
  }
}
.el-form-item .el-radio-group {
  margin-right: 16px;
}
.ad-section-title {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.ad-form-block {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 24px 32px 12px 32px;
  margin-bottom: 24px;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-form-item__label {
  font-weight: 500;
  font-size: 15px;
}
.el-button {
  min-width: 80px;
}
.el-dialog__body {
  padding-top: 18px;
  padding-bottom: 8px;
}
.el-table th {
  font-weight: bold;
  background: #f7f8fa;
}
.ad-position-select .el-select-tags-wrapper .el-tag {
  background: #f0f7ff;
  border: 1px solid #409EFF;
  color: #409EFF;
  border-radius: 16px;
  font-size: 14px;
  margin-right: 4px;
  margin-bottom: 2px;
  padding: 0 10px;
  transition: all 0.2s;
}
.ad-position-select .el-select-tags-wrapper .el-tag:hover {
  background: #e6f7ff;
  border-color: #66b1ff;
}
.ad-position-select .el-select-dropdown__item.selected {
  background: #e6f7ff;
  color: #409EFF;
}
</style>